<route>
{
  "meta":{
    "title":"打印设计",
    "showMenu":true,
    "serialNum": 20
  }
}
</route>
<template>
  <div>
    <el-row :gutter="12">
      <el-col :span="6">
        <el-input
          v-model="queryData.searchKey"
          placeholder="模版key或者模版名称"
          clearable
          :maxlength="64"
          prefix-icon="el-icon-search"
        />
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="loadData(1)">查询</el-button>
        <el-button @click="handleReset">重置</el-button>
      </el-col>
      <el-col class="mt10">
        <el-button type="primary" @click="handleCreate">新建</el-button>
      </el-col>
    </el-row>
    <el-table
      class="mt10"
      :data="tableData"
      v-loading="loading"
      style="width: 100%"
      current-row-key="id"
      stripe
      border
    >
      <el-table-column prop="key" label="模版key" />
      <el-table-column prop="name" label="模版名称" />
      <el-table-column prop="modelName" label="模型名称" />
      <el-table-column prop="remark" label="备注" />
      <el-table-column prop="modifyDate" label="更新时间" width="180">
        <template slot-scope="scope">
          {{ scope.row.modifyDate | moment }}
        </template>
      </el-table-column>
      <el-table-column prop="modifyBy" label="更新人" />
      <el-table-column prop="actions" label="操作" width="200">
        <template slot-scope="scope">
          <template v-if="isDesigner">
            <span class="table-actionItem">
              <el-button
                type="text"
                @click="handleDesign(scope.row)"
              >设计</el-button
              >
            </span>
            <span class="table-actionItem">
              <el-button
                type="text"
                @click="handleEdit(scope.row)"
              >编辑</el-button
              >
            </span>
            <span class="table-actionItem">
              <el-popconfirm
                title="删除后对应的打印按钮将无法使用，确认要删除该模板吗？"
                placement="top"
                @confirm="handleDelete(scope.row)"
              >
                <el-button
                  class="link-danger"
                  type="text"
                  slot="reference"
                >删除</el-button
                >
              </el-popconfirm>
            </span>
          </template>
          <template v-else>
            <span class="table-actionItem">
              <el-button
                type="text"
                @click="handleDesign(scope.row)"
              >设计</el-button
              >
            </span>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <div class="tr mt24">
      <x-pagination
        :total="total"
        :pageSize.sync="pageData.pageSize"
        :pageNo.sync="pageData.pageNo"
        @search="loadData"
      />
    </div>
  </div>
</template>

<script>
import CommonForm from './__components__/commonForm'
import {
  getHmprinttemplatePageList,
  deleteHmprinttemplate
} from '@/apis/paas/HmPrintTemplateController.js'
const DEFAULT_FOLDER = 1

export default {
  name: 'PrintDesign',
  components: {},
  data () {
    return {
      searchKey: '',
      loading: false,
      queryData: {},
      pageData: {
        pageSize: 10,
        pageNo: 1
      },
      tableData: [],
      total: 0,
      DEFAULT_FOLDER,
      currentFolder: {
        id: DEFAULT_FOLDER
      },
      restaurants: []
    }
  },

  computed: {
    isDesigner () {
      return process.env.VUE_APP_USER === 'ADMIN'
    }
  },

  created () {
    this.loadData()
  },

  methods: {
    handleCreate () {
      CommonForm.addForm().then(async () => {
        await this.handleReset()
        this.$message.success('新增成功')
      })
    },

    loadData (pageNo = this.pageData.pageNo) {
      this.loading = true
      getHmprinttemplatePageList({
        ...this.queryData,
        ...this.pageData,
        pageNo
      })
        .then((res) => {
          console.log(res.data)
          if (res.data.length === 0 && pageNo > 1) {
            this.loadData(pageNo - 1)
            return
          }
          this.tableData = res.data
          this.total = res.totalCount
        })
        .finally(() => {
          this.loading = false
        })
    },

    handleReset () {
      this.queryData = {}
      this.loadData(1)
    },

    // 设计
    handleDesign (record) {
      this.$router.push({
        name: 'designExcel',
        query: { key: record.key, name: record.name }
      })
    },
    // 编辑
    handleEdit (record) {
      CommonForm.editForm(record).then(async () => {
        await this.handleReset()
        this.$message.success('操作成功')
      })
    },
    // 删除
    handleDelete (record) {
      deleteHmprinttemplate([record.key]).then(async () => {
        await this.loadData()
        this.$message.success('操作成功')
      })
    },

    loadProcessList (query = '', callback) {
      const emptyData = []
      const searchKey = query.trim()
      if (!query.trim()) {
        callback(emptyData)
        return
      }
      getHmprinttemplatePageList({
        pageSize: 5,
        pageNo: 1,
        searchKey
      }).then((res) => {
        callback(res.data)
      })
    },

    handleProcessSelect (item) {
      this.handleDesign(item)
    }
  }
}
</script>

<style lang="scss" scoped>
.el-dropdown-menu {
  min-width: 100px;
}

.folder-card {
  border: 1px solid #dcdfe6;
  position: relative;
  cursor: pointer;

  ::v-deep .el-card__body {
    padding: 0;

    .folder-content {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      padding: 20px;
      box-sizing: border-box;
    }

    .menu {
      position: absolute;
      top: 10px;
      right: 10px;
    }

    .el-icon-folder {
      font-size: 38px;
      color: #999;
      margin-right: 10px;
    }

    .el-icon-more {
      font-size: 18px;
      color: #999;
    }

    .folder-title {
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
  }
}

.root-link {
  color: #409eff;
  cursor: pointer;
  margin-right: 5px;
  font-weight: bold;
}
</style>
